<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
</head>

<body>
    <p> 中断之后<br />
        break-after-column <br />

        类 属性 <br />
        break-after-auto break-after: auto;<br />
        break-after-avoid break-after: avoid;<br />
        break-after-all break-after: all;<br />
        break-after-avoid-page break-after: avoid-page;<br />
        break-after-page break-after: page;<br />
        break-after-left break-after: left;<br />
        break-after-right break-after: right;<br />
        break-after-column break-after: column;<br />

        中断之前<br />
        break-before-auto break-before: auto; <br />
        break-before-avoid break-before: avoid;<br />
        break-before-all break-before: all;<br />
        break-before-avoid-page break-before: avoid-page;<br />
        break-before-page break-before: page;<br />
        break-before-left break-before: left;<br />
        break-before-right break-before: right;<br />
        break-before-column break-before: column;<br />

        中断内部 <br />
        break-inside-auto break-inside: auto; <br />
        break-inside-avoid break-inside: avoid; <br />
        break-inside-avoid-page break-inside: avoid-page;<br />
        break-inside-avoid-column break-inside: avoid-column;<br />
    </p>
    <div class="columns-2">
        <p>Well, let me tell you something, ...</p>
        <p class="break-after-column">Sure, go ahead, laugh...</p>
        <p>Maybe we can live without...</p>
        <p>Look. If you think this is...</p>
    </div>
</body>

</html>